<template>
  <el-dialog v-model="dialogVisible" title="查看详情" width="800px" :close-on-click-modal="false" @close="handleClose">
    <div v-if="detailData" class="detail-dialog">
      <!-- 审批详情信息 -->
      <div class="detail-info">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="审批编号">
            {{ detailData.requestNo }}
          </el-descriptions-item>
          <el-descriptions-item label="审批类型">
            {{ detailData.templateDescription || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同编号">
            {{ detailData.cno || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="合同名称">
            <div class="info-item-with-link">
              <span>{{ detailData.cname || '-' }}</span>
              <el-link type="primary" @click="handleViewContract" style="margin-left: 30px;">查看信息</el-link>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="合同类型">
            {{ detailData.ctype == 1 ? '工程类' : '直销类' }}
          </el-descriptions-item>
          <el-descriptions-item label="工程名称">
            {{ detailData.projectName || '某工程名称' }}
          </el-descriptions-item>
          <el-descriptions-item label="关联需求编号">
            {{ detailData.dno || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="关联需求">
            <div class="info-item-with-link">
              <span>{{ detailData.dname || '-' }}</span>
              <el-link type="primary" @click="handleViewRequirement" style="margin-left: 30px;">查看参数</el-link>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="申请人">
            {{ detailData.applicantName || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">
            {{ parseTime(detailData.createTime) || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="申请原因" :span="2">
            {{ detailData.content }}
          </el-descriptions-item>
          <el-descriptions-item v-if="detailData.attachments?.length !== 0" label="附件">
            <div class="info-item-with-link">
              <span>{{ detailData.attachments }}</span>
              <div style="margin-left: 30px;">
                <el-link type="primary" @click="handlePreviewattachments" style="margin-right: 10px;">预览</el-link>
                <el-divider direction="vertical" />
                <el-link type="primary" @click="handleDownloadattachments">下载</el-link>
              </div>
            </div>
          </el-descriptions-item>
          <!-- 审批结果信息 -->
           <el-descriptions-item label="审批流程" :span="2">
            <el-timeline style="margin-left: -30px;">
              <el-timeline-item
                :timestamp="parseTime(item.createTime)" placement="top"
                v-for="(item, index) in sortedApprovalRecords"
                :key="item.nodeId || index"
                size="large"
                :type="getDecisionType(item.decision)"
                :icon="getDecisionIcon(item.decision)"
              >
                <el-card>
                  <div class="approval-item">
                    <div class="approval-title">
                      {{ item.nodeName || '-' }}
                    </div>
                    <div class="approval-approver">
                      审批人：{{ item.approverName || '-' }}
                    </div>
                    <div class="approval-content">
                      审批意见：
                      {{ item.comment || '-' }}
                    </div>
                    <div class="approval-content">
                      审批结果：
                      {{
                        item.decision === '01'
                          ? '审批中' : item.decision === '02' 
                            ? '已通过' : item.decision === '03' 
                              ? '已拒绝' : item.decision === '04'
                                ? '已撤回' : '转交'
                      }}
                    </div>
                    <div class="approval-approver" v-if="item.decision === '05'">
                      转交人：{{ item.transferToName || '-' }}
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-descriptions-item>
          <!-- <el-descriptions-item label="本节点完成时间">
            {{ parseTime(detailData.applyTime) || '-' }}
          </el-descriptions-item> -->
        </el-descriptions>
      </div>
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup name="DetailDialog">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Loading, Select, CloseBold, RefreshLeft, User } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  detailData: {
    type: Object,
    default: null
  }
})
// 获取时间线类型
function getDecisionType(status) {
  switch (status) {
    case '01':
      return 'primary'
    case '02':
      return 'success'
    case '03':
      return 'danger'
    case '04':
      return 'warning'
    default:
      return 'info'
  }
}

// 获取时间线图标
function getDecisionIcon(status) {
  switch (status) {
    case '01':
      return Loading
    case '02':
      return Select
    case '03':
      return CloseBold
    case '04':
      return RefreshLeft
    default:
      return User
  }
}

// Emits
const emit = defineEmits(['update:visible', 'view-info', 'view-param'])

// 弹窗显示状态
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

// 详细信息/参数改由父级统一弹窗展示

// 按nodeOrder升序排列审批记录的计算属性
const sortedApprovalRecords = computed(() => {
  // 确保detailData和approvalRecords存在，并且是数组
  if (!props.detailData || !Array.isArray(props.detailData?.approvalRecords)) {
    return []
  }
  
  // 创建一个副本并按nodeOrder升序排列
  return [...props.detailData?.approvalRecords].sort((a, b) => {
    // 确保nodeOrder是数字类型进行比较
    const orderA = Number(a.nodeOrder) || 0
    const orderB = Number(b.nodeOrder) || 0
    return orderA - orderB
  })
})

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}

// 查看合同信息
const handleViewContract = () => {
  emit('view-info', props.detailData)
}

// 查看需求参数
const handleViewRequirement = () => {
  emit('view-param', props.detailData)
}

// 预览附件
const handlePreviewattachments = () => {
  ElMessage.info('预览附件功能')
}

// 下载附件
const handleDownloadattachments = () => {
  ElMessage.info('下载附件功能')
}
</script>

<style lang="scss" scoped>
.detail-dialog {
  padding: 20px 0;
}

.action-buttons {
  text-align: right;
  margin-top: 30px;
}

.parameter-content {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  color: #666;
}
.info-item-with-link {
  display: flex;
  align-items: center;
  width: 100%;
}

.align-right {
  display: inline-block;
  margin-left: auto;
}

.link-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
:deep(.el-descriptions-item__label) {
  font-weight: 600;
}
</style>
